<template>
  <!-- card--基础用法 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- form--行内表单 -->
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input
            v-model="queryParams.courseName"
            placeholder="课程名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadCourses">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button
        style="float: right; padding: 15px"
        type="primary"
        @click="$router.push({ name: 'course-create' })"
        >十 新建课程</el-button
      >
    </div>
    <!-- table--带边框表格 -->
    <el-table :data="queryResult.records" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" align="center" />
      <el-table-column
        prop="courseName"
        label="课程名称"
        width="180"
        align="center"
      />
      <el-table-column prop="price" label="价格" align="center" />
      <el-table-column prop="sortNum" label="排序" align="center" />
      <el-table-column label="状态" align="center" v-slot="scope">
        <!-- switch扩展的 value 类型 -->
        <el-switch
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="上架"
          inactive-text="下架"
          @change="handleChangeStatus(scope.row)"
        />
      </el-table-column>
      <el-table-column label="操作" align="center" v-slot="scope">
        <el-button
          @click="
            $router.push({
              name: 'course-edit',
              params: {
                courseId: scope.row.id,
              },
            })
          "
          >编辑</el-button
        >
        <el-button>内容管理</el-button>
      </el-table-column>
    </el-table>
    <!-- pagination分页-完整功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryResult.total"
    />
  </el-card>
</template>
<script>
import { getCourses, setCourseStatus } from "@/api/course";
export default {
  name: "CourseIndex",
  data() {
    return {
      //查询条件
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        courseName: "",
        status: undefined,
      },
      //查询结果
      queryResult: {},
      //form行内表单数据(queryParams)

      //table数据(queryResult)

      //pagination分页数据(queryParams,queryResult)
    };
  },
  created() {
    this.loadCourses();
  },
  methods: {
    //调用课程信息的方法
    loadCourses() {
      getCourses(this.queryParams).then((res) => {
        if (res.data.code === "000000") {
          const {
            current: currentPage,
            // pages,
            records,
            size: pageSize,
            total,
          } = res.data.data;
          Object.assign(this.queryParams, { currentPage, pageSize });
          this.queryResult = {
            pages: Math.ceil(total / pageSize),
            records,
            total,
          };
        } else {
          this.$message.error("加载课程信息失败...");
        }
        console.log("课程信息", res);
        console.log("查询结果", this.queryResult);
      });
    },
    //form表单方法
    onSubmit() {
      console.log("submit!");
    },
    //pagination分页方法
    //改变每页多少条
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.currentPage = 1;
      this.loadCourses();
    },
    //当前第几页
    handleCurrentChange(val) {
      this.queryParams.currentPage = val;
      this.loadCourses();
    },
    //handleChangeStatus改变上架,下架状态,如果是1就上架,0就执行下架（遍历的是课程）
    handleChangeStatus(course) {
      console.log(course.status);
      const actionStr = course.status ? "上架" : "下架";
      //调用接口（传课程id,和课程状态）
      setCourseStatus(course.id, course.status).then((res) => {
        if (res.data.code === "000000") {
          this.$message.success(`课程${actionStr}成功!`);
        } else {
          this.$message.error(`课程${actionStr}失败...`);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
